/**
 *  预警预报应用深化-周期性分析-AQI小时预报
 *  Created by lins on 2018/7/17.
 */
'use strict';
angular.module("MetronicApp").directive('hourLine', function () {
    return {
        scope: {
            id: "@",
            data: "="
        },
        restrict: 'EA',
        template: '',
        replace: true,
        link: function ($scope, element, attrs, controller) {
            function getOption(data) {
                var list=[];
                for(var i=0;i<48;i++){
                    if(i<10){
                        list.push('06-22 0' + i + '时');
                    }else if(i>=10&&i<25) {
                        list.push('06-22 ' + i + '时');
                    }else if(i>=24&&i<34){
                        list.push('06-23 0' + (i-24) + '时');
                    }else if(i>=34){
                        list.push('06-23 ' + (i-24) + '时');
                    }

                }
                var option = {
                    title : {
                        text: 'AQI小时预报',
                        x:'left',
                        textStyle:{  //标题文字设置
                            fontSize: '12',
                            fontWeight:'100px'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        axisLabel:{
                            interval:9,
                        },
                        data: list
                    },
                    yAxis: {
                        min:0,
                        max:100,
                        interval:20,
                    },
                    grid: {
                        top: '20%',

                    },
                    series: [
                        {

                            type:'line',
                            smooth:0.4,
                            sampling: 'average',
                            symbol:'none',
                            itemStyle: {
                                normal: {
                                    color: '#737DBC'
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgb(201, 216, 237)'
                                    }, {
                                        offset: 1,
                                        color: 'rgb(166, 171, 222)'
                                    }])
                                }
                            },
                            data:[55, 45, 23, 54,40, 75,72,70,55, 45, 23, 54,40, 75,72,70,55, 45, 23, 54,40, 75,72,70,55, 45, 23, 54,40, 75,72,70,55, 45, 23, 54,40, 75,72,70,55, 45, 23, 54,40, 75,72,70]
                        }
                    ]
                };
                return option;
            }

            var myChart = echarts.init(document.getElementById('importantActivityLine'), 'macarons');
            myChart.setOption(getOption($scope.data));

            $scope.$watch('data', function (newVal, oldVal) {
                myChart.setOption(getOption(newVal));
            });
        }
    };
});
